<template>
	<view class="flex-col page">
		<view class="flex-col section space-y-60">
			<view class="flex-row justify-center relative" @click="backpage">
				<image class="image pos"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796353949290432948.png" />
				<text class="text">充值管理</text>
			</view>
			<!-- <view class="flex-row justify-between items-center group">
				<text class="text_2">铁西沈辽路店</text>
				<view class="flex-row space-x-7">
					<text class="font_1 text_3">切换门店</text>
					<image class="shrink-0 image_2"
						src="https://gongxiangtaiqiu.axa2.com/taiqiu/16796353949245993865.png" />
				</view>
			</view> -->
		</view>
		<view class="flex-col relative group_2 space-y-60">
			<view class="flex-col section_2">
				<text class="self-start font_2 text_4">充值列表</text>
				<view class="flex-col group_3 space-y-19">
					<view class="flex-row space-x-10">
						<view class="flex-col justify-start relative equal-division-item" v-for="item in mealList">
							<view class="flex-col section_3">
								<view class="flex-row group_4 space-x-4">
									<text class="self-center font_3">{{item.f_charge_money}}</text>
									<text class="self-start font_4 text_5">元</text>
								</view>
								<view class="flex-col justify-start items-center text-wrapper view">
									<text class="font_5">赠送{{item.f_gift_money}}元</text>
								</view>
							</view>
							<image class="image_3 pos_2" @click="delitem(item.id)"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/4bef90139797620b8df7454394746632.png" />
						</view>
					</view>
					<view class="flex-row space-x-21">
						<view class="flex-col section_4 space-y-43">
							<view class="flex-col justify-start text-wrapper">
								<input class="font_6 text_6" placeholder="输入充值金额" v-model="recharge" />
							</view>
							<view class="flex-col justify-start text-wrapper">
								<input class="font_6 text_6" placeholder="输入赠送金额" v-model="presented" />
							</view>
						</view>
						<view class="flex-col items-center section_5 space-y-32">
							<image class="image_4"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/37229eae8b77979c33b198d82277559f.png" />
							<text class="text_7">添加充值</text>
						</view>
					</view>
				</view>
				<text class="self-start font_1 text_9">*充值的赠送金额可为0元</text>
			</view>
			<view class="flex-col justify-start items-center button" @click="addCreateMeal">
				<text class="font_2 text_10">保存</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				presented: '', //赠送
				recharge: '', //充值
				mealList: {},
			};
		},
		onLoad() {
			if (uni.getStorageSync('Bshop_name') == '') {
				uni.showToast({
					icon: 'none',
					title: '请在首页选择店铺哦！'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			}
			this.getCreateMeal()
		},
		methods: {
			delitem(item) {
				console.log(item)
				this.$Api.delMeal({
					id: item,
				}).then(res => {
					this.getCreateMeal()
				})
			},
			//获取充值规格
			getCreateMeal() {
				this.$Api.getMeal({
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					this.mealList = res.data.data
					console.log(res)
				})
			},
			//创建充值规格
			addCreateMeal() {
				this.$Api.shopCreateMeal({
					chargeMoney: this.recharge,
					giftMoney: this.presented,
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '创建成功'
						})
						this.getCreateMeal()
						// 	setTimeout(() => {
						// 		uni.navigateBack({
						// 			delta: 1
						// 		})
						// 	}, 500)

					}
				})
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/
	page {
		background-color: #f3f3f5;
	}

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		padding-bottom: 518rpx;
		background-color: #f3f3f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 104rpx 23rpx 494rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.image {
		width: 20rpx;
		height: 34rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 34rpx;
	}

	.group {
		padding: 0 8rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.font_1 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
	}

	.text_3 {
		color: #ffffff;
		font-weight: 700;
	}

	.image_2 {
		width: 24rpx;
		height: 22rpx;
	}

	.group_2 {
		margin-top: -455rpx;
		padding: 0 30rpx;
	}

	.space-y-60>view:not(:first-child),
	.space-y-60>text:not(:first-child),
	.space-y-60>image:not(:first-child) {
		margin-top: 60rpx;
	}

	.section_2 {
		padding: 40rpx 18rpx 40rpx 28rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 700;
	}

	.text_4 {
		color: #222222;
	}

	.group_3 {
		margin-top: 12rpx;
	}

	.space-y-19>view:not(:first-child),
	.space-y-19>text:not(:first-child),
	.space-y-19>image:not(:first-child) {
		margin-top: 19rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 10rpx;
	}

	.equal-division-item {
		width: 31%;
		flex-wrap: wrap;
		/* flex: 1 1 208rpx; */
		padding: 16rpx 0 10rpx;
	}

	.section_3 {
		margin-right: 12rpx;
		padding: 0 12rpx 20rpx 20rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		border: solid 2rpx #19c865;
	}

	.group_4 {
		padding: 53rpx 4rpx 47rpx;
	}

	.space-x-4>view:not(:first-child),
	.space-x-4>text:not(:first-child),
	.space-x-4>image:not(:first-child) {
		margin-left: 4rpx;
	}

	.font_3 {
		font-size: 45rpx;
		font-family: PingFang SC;
		line-height: 46rpx;
		font-weight: 700;
		color: #222222;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_5 {
		margin-top: 21rpx;
	}

	.text-wrapper {
		padding: 18rpx 0;
		background-color: #f2f2f2;
		border-radius: 16rpx;
	}

	.view {
		margin-right: 4rpx;
	}

	.font_5 {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
		font-weight: 500;
		color: #222222;
	}

	.image_3 {
		width: 48rpx;
		height: 48rpx;
	}

	.pos_2 {
		position: absolute;
		right: 0;
		top: 6rpx;
	}

	.pos_3 {
		position: absolute;
		right: 0;
		top: 6rpx;
	}

	.pos_4 {
		position: absolute;
		right: 0;
		top: 6rpx;
	}

	.space-x-21>view:not(:first-child),
	.space-x-21>text:not(:first-child),
	.space-x-21>image:not(:first-child) {
		margin-left: 21rpx;
	}

	.section_4 {
		padding: 25rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		height: 228rpx;
		border: solid 2rpx #19c865;
	}

	.space-y-43>view:not(:first-child),
	.space-y-43>text:not(:first-child),
	.space-y-43>image:not(:first-child) {
		margin-top: 25rpx;
	}

	.font_6 {
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
		font-weight: 500;
		color: #999999;
	}

	.text_6 {
		margin-left: 13rpx;
		margin-right: 10rpx;
	}

	.text_8 {
		margin-left: 13rpx;
		margin-right: 10rpx;
	}

	.section_5 {
		padding: 38rpx 0;
		background-color: #ffffff;
		border-radius: 32rpx;
		width: 196rpx;
		height: 228rpx;
		border: solid 2rpx #19c865;
	}

	.space-y-32>view:not(:first-child),
	.space-y-32>text:not(:first-child),
	.space-y-32>image:not(:first-child) {
		margin-top: 32rpx;
	}

	.image_4 {
		width: 88rpx;
		height: 88rpx;
	}

	.text_7 {
		color: #222222;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 28rpx;
	}

	.text_9 {
		margin-top: 41rpx;
		color: #999999;
		font-weight: 500;
	}

	.button {
		padding: 30rpx 0;
		background-color: #19c865;
		border-radius: 44rpx;
	}

	.text_10 {
		color: #ffffff;
	}
</style>
